import React, {FC, useEffect, useState} from 'react';
import {Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
import {WebView} from 'react-native-webview';
import {View} from '@ant-design/react-native';
import axios from '../../http/http';
import UnitText from '../../component/UnitText';
import {formatTime} from '../../util/util';
import Remark from './remark';

const BlogDetail = ({route, navigation}) => {
  var {height: deviceHeight, width: deviceWidth} = Dimensions.get('window');
  const [content, setContent] = useState('');
  const [height, setHeight] = useState(0);
  const [title, setTitle] = useState('');
  const [time, setTime] = useState('');
  const {id} = route.params;
  useEffect(() => {
    getBlogDetail();
  }, []);
  const getBlogDetail = () => {
    axios
      .get('/blog/detail', {
        params: {
          id,
        },
      })
      .then(res => {
        setTitle(res.data.title);
        setTime(res.data.time);
        const style = `<style>
        *{
          font-size: 30px;
          margin: 10px;
        }
        #webView {
          background: '#000';
        }
        .hljs {
          box-sizing: border-box;
        opacity: 0.8;
        border: 0;
        font-family: "Consulas", "Courier New", Courier, mono, serif;
        font-size: 12px;
        background: #000 !important;
        display: block;
        width: 100%;
        font-weight: 400;
        color: #333;
        white-space: pre-wrap;
          margin: 8px 0;
          overflow-x: auto;
          background-color: #000;
          border-radius: 5px;
          padding: 15px;
          overflow: auto;
          color: #9cdcf1;
          font-size: 12px;
        box-shadow: 0 0 20px 0px #888;

      }
      .hljs ul {
        background-color: #fff;
        margin: 0px 0px 0 40px !important;
        padding: 0px;
      }
      .hljs ul li {
        list-style-type: style !important;
        border-left: 1px solid #ddd !important;
        background: #fff;
        padding: 5px !important;
        margin: 0 !important;
        line-height: 22px;
        height: 20px;
        word-break: break-all;
        word-wrap: break-word;
        color: #333;
      }
        .hljs-keyword{
            color: #dcdcaa;
        }
        .hljs-meta{
            // display: block;
        }
        .hljs-title{
            color: burlywood;
        }
        .hljs-string{
            color: #ce9278;
        }
        .hljs-function{
            color: #dcdcaa;
        }
        .hljs-tag{
            // display: block;
            color: #569cd6;
        }
        .hljs-selector-class{
            color: #dcdcaa;
        }
        .hljs-attr{
            color: #9cdcf1;
        }
        .hljs-comment{
            color: #618a4f;
        }
        .hljs-attribute{
            margin-left: 1em;
        }
    
}
      </style>`;
        setContent('<body>' + res.data.content + '</body>' + style);
      });
  };
  const BaseScript = `
        function changeHeight() {
            const div = document.body
              window.ReactNativeWebView.postMessage(div.scrollHeight)
          }
        setTimeout(changeHeight, 300);
    `;
  /**
   * web端发送过来的交互消息
   */
  const onMessage = event => {
    try {
      const webViewHeight = event.nativeEvent.data;
      setHeight(webViewHeight * 0.4);
    } catch (error) {
      // pass
    }
  };
  return (
    <ScrollView>
      <View style={{backgroundColor: '#fff', padding: 20}}>
        <UnitText TStyle={styles.title}>{title}</UnitText>
        <UnitText TStyle={styles.time}>ttzxh | {formatTime(time)}</UnitText>
      </View>
      <View style={{flex: 1}}>
        <WebView
          style={{
            width: deviceWidth,
            height,
          }}
          source={{html: content}}
          javaScriptEnabled
          injectedJavaScript={BaseScript}
          onMessage={e => onMessage(e)}
        />
      </View>
      <Remark blogId={id} />
    </ScrollView>
  );
};
const styles = StyleSheet.create({
  title: {fontSize: 20, color: '#000', textAlign: 'center', lineHeight: 60},
  time: {fontSize: 14, color: '#888', textAlign: 'center'},
});
export default BlogDetail;
